<template>
  <div>
    <el-row class="lock-btn">
      <el-input
        v-model="queryParams.orderId"
        style="width: 250px; float: left; margin-left: 5px"
        clearable
        placeholder="请输入订单"
        @clear="reload"
      ></el-input>
      <el-input
        v-model="queryParams.lockMac"
        style="width: 250px; float: left;margin-left:5px;"
        clearable
        placeholder="请输入设备编号"
        @clear="reload"
      ></el-input>
      <el-input
        v-model="queryParams.phone"
        style="width: 250px; float: left;margin-left:5px;"
        clearable
        placeholder="请输入手机号"
        @clear="reload"
      ></el-input>
      <el-input
        v-model="queryParams.openid"
        style="width: 250px; float: left;margin-left:5px;"
        clearable
        placeholder="请输入openid"
        @clear="reload"
      ></el-input>

      <!-- <el-date-picker
        v-model="queryParams.startTime"
        value-format="yyyy-MM-dd HH:mm:ss"
        style="width: 250px"
        type="datetime"
        placeholder="请选择开始时间"
      ></el-date-picker>
      <el-date-picker
        v-model="queryParams.endTime"
        value-format="yyyy-MM-dd HH:mm:ss"
        style="width: 250px"
        type="datetime"
        placeholder="请选择结束时间"
      ></el-date-picker> -->
      <el-button-group style="margin-left: 5px">   
      <el-button size="medium" type="primary" @click="search" round>搜索</el-button>
      </el-button-group>
      
    </el-row>





    <el-row style="box-shadow: rgb(205 205 205) 1px 1px 8px;">
      <el-col :span="24">
        <el-table :header-cell-style="{ background: '#ecf3fd',color:'#000000' }" highlight-current-row ref="lcredepositrequestTable" v-loading="loading" :data="list" :stripe="true" :max-height="clientHeight" :height="clientHeight" @selection-change="handleTableChange">
 
          <el-table-column prop="orderId" label="订单号" width="250" sortable align="center">
          </el-table-column>
          <el-table-column prop="lockMac" label="设备编号" width="120" sortable align="center">
          </el-table-column>
          <el-table-column prop="userId" label="openID" width="280" align="center">
          </el-table-column>
          <!-- <el-table-column prop="phone" label="手机号" width="" align="center">
          </el-table-column> -->
          <el-table-column prop="modifyTime" label="处理时间" width="" align="center">
          </el-table-column>
         
          
          <el-table-column prop="notes" label="处理结果" width="" align="center">
          </el-table-column>
          <el-table-column prop="opName" label="处理人员" width="" align="center">
          </el-table-column>
          <el-table-column label="查看详情" width="" align="center">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="editBtn(scope.$index, scope.row)">查询</el-button>
            </template>
          </el-table-column>
          
        </el-table>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24" class="page-tool">
        <el-pagination layout="total,sizes,prev, pager,next,jumper" :page-size="pageSize" :total="total" :page-sizes="[10, 20, 30, 40, 100]" @size-change="handlePageChange" @current-change="handleNoChange">
        </el-pagination>
      </el-col>
    </el-row>




   
<el-dialog title="对比" ref="checkTable" v-loading="" :visible.sync="addDialog" :width="'1000px'" :destroy-on-close="true">
  <div>
    <span style="position:absolute;top:50px;left:250px;color:#ff770f;font-size: 16px;font-weight: 600;">原始数据</span>
    <span style="position:absolute;top:50px;left:720px;color:#ff770f;font-size: 16px;font-weight: 600;">校对数据</span>
  </div>
  <el-form :model="feeForm" ref="addForm">
   
    <el-row>
      <div class="list" v-bind:class="{active:isActive.id}">
      <el-col span="11">
    <el-form-item label="id" :label-width="labelWidth">
      <el-input v-model="feeForm.id"  auto-complete="off"></el-input>
    </el-form-item>
  </el-col>
  <el-col span="12">
    <el-form-item label="id" :label-width="labelWidth2" style="">
      <el-input v-model="feeForm2.id"  auto-complete="off" style=""></el-input>
    </el-form-item>
  </el-col>
</div>
</el-row>
<el-row>
  <div class="list" v-bind:class="{active:isActive.userId}">
  <el-col span="11">
    <el-form-item label="open_id" :label-width="labelWidth">
      <el-input v-model="feeForm.userId"  auto-complete="off"></el-input>
    </el-form-item>
  </el-col>
  <el-col span="12">
    <el-form-item label="open_id" :label-width="labelWidth2">
      <el-input v-model="feeForm2.userId"  auto-complete="off"></el-input>
    </el-form-item>
  </el-col>
</div>
    </el-row>


    <el-row>
      <div class="list" v-bind:class="{active:isActive.orderId}">
      <el-col span="11">
    <el-form-item label="订单号" :label-width="labelWidth">
      <el-input v-model="feeForm.orderId"  auto-complete="off"></el-input>
    </el-form-item>
  </el-col>
  <el-col span="12">
    <el-form-item label="订单号" :label-width="labelWidth2">
      <el-input v-model="feeForm2.orderId"  auto-complete="off"></el-input>
    </el-form-item>
  </el-col>
  </div>
</el-row>
<el-row>
  <div class="list" v-bind:class="{active:isActive.currentNum}">
  <el-col span="11">
    <el-form-item label="充电量" :label-width="labelWidth">
      <el-input v-model="feeForm.currentNum"  auto-complete="off"></el-input>
    </el-form-item>
  </el-col>
  <el-col span="12">
    <el-form-item label="充电量" :label-width="labelWidth2">
      <el-input v-model="feeForm2.currentNum"  auto-complete="off"></el-input>
    </el-form-item>
  </el-col>
</div>
    </el-row>

    
    <el-row>
      <div class="list" v-bind:class="{active:isActive.startTime}">
      <el-col span="11">
    <el-form-item label="充电开始时间" :label-width="labelWidth">
      <el-date-picker
        v-model="feeForm.startTime"
        value-format="yyyy-MM-dd HH:mm:ss"
        style="width: 250px;"
        type="datetime"
        placeholder=""
        
      ></el-date-picker>
    </el-form-item>
  </el-col>
  <el-col span="12">
    <el-form-item label="充电开始时间" :label-width="labelWidth2">
      <el-date-picker
        v-model="feeForm2.startTime"
        value-format="yyyy-MM-dd HH:mm:ss"
        style="width: 250px;"
        type="datetime"
        placeholder=""
        
      ></el-date-picker>
    </el-form-item>
  </el-col>
      </div>
    </el-row>
  <el-row>
      <div class="list" v-bind:class="{active:isActive.endTime}">
  <el-col span="11">
    <el-form-item label="充电结束时间" :label-width="labelWidth">
      <el-date-picker
        v-model="feeForm.endTime"
        value-format="yyyy-MM-dd HH:mm:ss"
        style="width: 250px;"
        type="datetime"
        placeholder=""
        
      ></el-date-picker>
    </el-form-item>
  </el-col>
  <el-col span="12">
    <el-form-item label="充电结束时间" :label-width="labelWidth2">
      <el-date-picker
        v-model="feeForm2.endTime"
        value-format="yyyy-MM-dd HH:mm:ss"
        style="width: 250px;"
        type="datetime"
        placeholder=""
        
      ></el-date-picker>
    </el-form-item>
  </el-col>
      </div>
    </el-row>

 
      <el-row>
      <div class="list" v-bind:class="{active:isActive.lockIp}">
      <el-col span="11">
    <el-form-item label="ip地址" :label-width="labelWidth">
      <el-input v-model="feeForm.lockIp"  auto-complete="off"></el-input>
    </el-form-item>
  </el-col>
  <el-col span="12">
    <el-form-item label="ip地址" :label-width="labelWidth2">
      <el-input v-model="feeForm2.lockIp"  auto-complete="off"></el-input>
    </el-form-item>
  </el-col>
      </div>
    </el-row>
      <el-row>
      <div class="list" v-bind:class="{active:isActive.lockMac}">
  <el-col span="11">
    <el-form-item label="mac地址" :label-width="labelWidth">
      <el-input v-model="feeForm.lockMac"  auto-complete="off"></el-input>
    </el-form-item>
  </el-col>
  <el-col span="12">
    <el-form-item label="mac地址" :label-width="labelWidth2">
      <el-input v-model="feeForm2.lockMac"  auto-complete="off"></el-input>
    </el-form-item>
  </el-col>
      </div>
    </el-row>

    <el-row>
      <div class="list" v-bind:class="{active:isActive.isOccupied}">
      <el-col span="11">
    <el-form-item label="是否占位" :label-width="labelWidth">
      <el-select v-model="feeForm.isOccupied" placeholder="" >
            <el-option key="0" label="是"  :value="true"></el-option>
            <el-option key="1" label="否" :value="false"></el-option>
          </el-select>
    </el-form-item>
  </el-col>
  <el-col span="12">
    <el-form-item label="是否占位" :label-width="labelWidth2">
      <el-select v-model="feeForm2.isOccupied" placeholder="" >
            <el-option key="0" label="是" :value="true"></el-option>
            <el-option key="1" label="否" :value="false"></el-option>
          </el-select>
    </el-form-item>
  </el-col>
      </div>
    </el-row>
      <el-row>
      <div class="list" v-bind:class="{active:isActive.leaveTime}">
  <el-col span="11">
    <el-form-item label="离开时间" :label-width="labelWidth">
      <el-date-picker
        v-model="feeForm.leaveTime"
        value-format="yyyy-MM-dd HH:mm:ss"
        style="width: 250px;"
        type="datetime"
        placeholder=""
        
      ></el-date-picker>
    </el-form-item>
  </el-col>
  <el-col span="12">
    <el-form-item label="离开时间" :label-width="labelWidth2">
      <el-date-picker
        v-model="feeForm2.leaveTime"
        value-format="yyyy-MM-dd HH:mm:ss"
        style="width: 250px;"
        type="datetime"
        placeholder=""
        
      ></el-date-picker>
    </el-form-item>
  </el-col>
      </div>
    </el-row>

    <el-row>
      <div class="list" v-bind:class="{active:isActive.consumeFee}">
      
      <el-col span="11">
    <el-form-item label="消费金额" :label-width="labelWidth">
      <el-input v-model="feeForm.consumeFee"  auto-complete="off"></el-input>
    </el-form-item>
  </el-col>
  <el-col span="12">
    <el-form-item label="消费金额" :label-width="labelWidth2">
      <el-input v-model="feeForm2.consumeFee"  auto-complete="off"></el-input>
    </el-form-item>
  </el-col>
      </div>
    </el-row>
      <el-row>
      <div class="list" v-bind:class="{active:isActive.occupiedFee}">
  <el-col span="11">
    <el-form-item label="占位费金额" :label-width="labelWidth">
      <el-input v-model="feeForm.occupiedFee"  auto-complete="off"></el-input>
    </el-form-item>
  </el-col>
  <el-col span="12">
    <el-form-item label="占位费金额" :label-width="labelWidth2">
      <el-input v-model="feeForm2.occupiedFee"  auto-complete="off"></el-input>
    </el-form-item>
  </el-col>
      </div>
    </el-row>

    <el-row>
      <div class="list" v-bind:class="{active:isActive.occupiedTime}">
      <el-col span="11">
    <el-form-item label="占位时间" :label-width="labelWidth">
      <el-input v-model="feeForm.occupiedTime"  auto-complete="off"></el-input>
    </el-form-item>
  </el-col>
  <el-col span="12">
    <el-form-item label="占位时间" :label-width="labelWidth2">
      <el-input v-model="feeForm2.occupiedTime"  auto-complete="off"></el-input>
    </el-form-item>
  </el-col>
      </div>
    </el-row>
      <el-row>
      <div class="list" v-bind:class="{active:isActive.amount}">
  <el-col span="11">
    <el-form-item label="支付金额" :label-width="labelWidth">
      <el-input v-model="feeForm.amount"  auto-complete="off"></el-input>
    </el-form-item>
  </el-col>
  <el-col span="12">
    <el-form-item label="支付金额" :label-width="labelWidth2">
      <el-input v-model="feeForm2.amount"  auto-complete="off"></el-input>
    </el-form-item>
  </el-col>
      </div>
    </el-row>

    <el-row>
      <div class="list" v-bind:class="{active:isActive.firstElectricityNum}">
      <el-col span="11">
    <el-form-item label="尖" :label-width="labelWidth">
      <el-input v-model="feeForm.firstElectricityNum"  auto-complete="off"></el-input>
    </el-form-item>
  </el-col>
  <el-col span="12">
    <el-form-item label="尖" :label-width="labelWidth2">
      <el-input v-model="feeForm2.firstElectricityNum"  auto-complete="off"></el-input>
    </el-form-item>
  </el-col>
  </div>
</el-row>
  <el-row>
      <div class="list" v-bind:class="{active:isActive.secondElectricityNum}">
  <el-col span="11">
    <el-form-item label="峰" :label-width="labelWidth">
      <el-input v-model="feeForm.secondElectricityNum"  auto-complete="off"></el-input>
    </el-form-item>
  </el-col>
  <el-col span="12">
    <el-form-item label="峰" :label-width="labelWidth2">
      <el-input v-model="feeForm2.secondElectricityNum"  auto-complete="off"></el-input>
    </el-form-item>
  </el-col>
      </div>
    </el-row>

    <el-row>
      <div class="list" v-bind:class="{active:isActive.thirdElectricityNum}">
      <el-col span="11">
    <el-form-item label="平" :label-width="labelWidth">
      <el-input v-model="feeForm.thirdElectricityNum"  auto-complete="off"></el-input>
    </el-form-item>
  </el-col>
  <el-col span="12">
    <el-form-item label="平" :label-width="labelWidth2">
      <el-input v-model="feeForm2.thirdElectricityNum"  auto-complete="off"></el-input>
    </el-form-item>
  </el-col>
      </div>
      </el-row>
      <el-row>
      <div class="list" v-bind:class="{active:isActive.fourthElectricityNum}">
  <el-col span="11">
    <el-form-item label="谷" :label-width="labelWidth">
      <el-input v-model="feeForm.fourthElectricityNum"  auto-complete="off"></el-input>
    </el-form-item>
  </el-col>
  <el-col span="12">
    <el-form-item label="谷" :label-width="labelWidth2">
      <el-input v-model="feeForm2.fourthElectricityNum"  auto-complete="off"></el-input>
    </el-form-item>
  </el-col>
      </div>
    </el-row>


      <el-row>
      <div class="list" v-bind:class="{active:isActive.electricityNum}">
      <el-col span="11">
    <el-form-item label="历史总电量" :label-width="labelWidth">
      <el-input v-model="feeForm.electricityNum"  auto-complete="off"></el-input>
    </el-form-item>
  </el-col>
  <el-col span="12">
    <el-form-item label="历史总电量" :label-width="labelWidth2">
      <el-input v-model="feeForm2.electricityNum"  auto-complete="off"></el-input>
    </el-form-item>
  </el-col>
  </div>
  </el-row>
  <el-row>
      <div class="list" v-bind:class="{active:isActive.payWays}">
  <el-col span="11">

    <el-form-item label="支付方式" :label-width="labelWidth"> 
      <el-tag v-if="feeForm.payWays == 0" size="medium" type="success" effect="dark">微信</el-tag>
              <el-tag v-else-if="feeForm.payWays == 1" size="medium" type="warning" effect="dark">余额</el-tag>
              <el-tag v-else-if="feeForm.payWays == 2" size="medium" type="error" effect="dark">充值余额</el-tag>
              <el-tag v-else size="medium" type="info" effect="dark">其他</el-tag>
    </el-form-item>


  </el-col>
  <el-col span="11">

<el-form-item label="支付方式" :label-width="labelWidth2"> 
  <el-tag v-if="feeForm2.payWays == 0" size="medium" type="success" effect="dark">微信</el-tag>
          <el-tag v-else-if="feeForm2.payWays == 1" size="medium" type="warning" effect="dark">余额</el-tag>
          <el-tag v-else-if="feeForm2.payWays == 2" size="medium" type="error" effect="dark">充值余额</el-tag>
          <el-tag v-else size="medium" type="info" effect="dark">其他</el-tag>
</el-form-item>
</el-col>
      </div>
      </el-row>
      <el-row>
      <div class="list" v-bind:class="{active:isActive.stopReason}">

      <el-col span="11">
    <el-form-item label="停止原因" :label-width="labelWidth">
      <el-input v-model="feeForm.stopReason"  auto-complete="off"></el-input>
    </el-form-item>
  </el-col>
  <el-col span="12">
    <el-form-item label="停止原因" :label-width="labelWidth2">
      <el-input v-model="feeForm2.stopReason"  auto-complete="off"></el-input>
    </el-form-item>
  </el-col>
      </div>
      </el-row>

<el-row>
      <div class="list" v-bind:class="{active:isActive.payOccTime}">
  <el-col span="11">
    <el-form-item label="占位支付时间" :label-width="labelWidth">
      <el-date-picker
        v-model="feeForm.payOccTime"
        value-format="yyyy-MM-dd HH:mm:ss"
        style="width: 250px;"
        type="datetime"
        placeholder=""
        
      ></el-date-picker>
    </el-form-item>
  </el-col>
  <el-col span="12">
    <el-form-item label="占位支付时间" :label-width="labelWidth2">
      <el-date-picker
        v-model="feeForm2.payOccTime"
        value-format="yyyy-MM-dd HH:mm:ss"
        style="width: 250px;"
        type="datetime"
        placeholder=""
        
      ></el-date-picker>
    </el-form-item>
  </el-col>
      </div>
    </el-row>

    <el-row>
      <div class="list" v-bind:class="{active:isActive.exceptionCode}">

      <el-col span="11">
    <el-form-item label="异常代码" :label-width="labelWidth">
      <el-input v-model="feeForm.exceptionCode"  auto-complete="off"></el-input>
    </el-form-item>
  </el-col>
  <el-col span="12">
    <el-form-item label="异常代码" :label-width="labelWidth2">
      <el-input v-model="feeForm2.exceptionCode"  auto-complete="off"></el-input>
    </el-form-item>
  </el-col>
</div>
</el-row>

<el-row>
      <div class="list" v-bind:class="{active:isActive.status}">
  <el-col span="11">
    <el-form-item label="状态" :label-width="labelWidth">
      <el-select v-model="feeForm.status" placeholder="" >
            <el-option key="0" label="空闲" :value="1"></el-option>
            <el-option key="1" label="充电中" :value="2"></el-option>
            <el-option key="2" label="等待启动" :value="3"></el-option>
            <el-option key="3" label="超时启动" :value="4"></el-option>
          </el-select>
    </el-form-item>
  </el-col>
  <el-col span="12">
    <el-form-item label="状态" :label-width="labelWidth2" >
      <el-select v-model="feeForm2.status" placeholder="" >
            <el-option key="0" label="空闲" :value="1"></el-option>
            <el-option key="1" label="充电中" :value="2"></el-option>
            <el-option key="2" label="等待启动" :value="3"></el-option>
            <el-option key="3" label="超时启动" :value="4"></el-option>
          </el-select>
    </el-form-item>
  </el-col>
      </div>
    </el-row>
    <el-row>
      <div class="list">
  <el-col span="18">
    <el-form-item label="处理原因" :label-width="labelWidth2">
      <!-- <el-input v-model="feeForm.notes"  auto-complete="off"></el-input> -->
      <el-select v-model="feeForm.notes" placeholder="请选择处理原因" >
                <el-option key="0" label="车走未落杆" :value="0"></el-option>
                <el-option key="1" label="通讯异常" :value="1"></el-option>
                <el-option key="2" label="设备断电" :value="2"></el-option>
                <el-option key="3" label="充电失败" :value="3"></el-option>
                <el-option key="4" label="电量上传失败" :value="4"></el-option>
                <el-option key="5" label="其他" :value="5"></el-option>
              </el-select>
    </el-form-item>
  </el-col>
      </div>
</el-row>

<el-row>
      <div class="list">
  <el-col span="18">
    <el-form-item label="处理人员" :label-width="labelWidth2">
      <el-input v-model="feeForm.opName"  auto-complete="off"></el-input>
    </el-form-item>
  </el-col>
      </div>
</el-row>



  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="addDialog = false">取消</el-button>
  </div>
  <!-- <div style="border-left: 1px solid #e2e2e2;height: 1500px;position: absolute;top:50px;left:490px"></div> -->
</el-dialog>

       
      
  </div>
</template>

<script>
import { getNickName, getTestUserName,getRoleCode } from "../../util/auth";
import {
  loadlistApi,
  procRefundApi,
  loadProcessOrderApi
} from "../../api/lcredepositrequest.js";
import { loadParkfieldApi } from "../../api/parkfield";

export default {
  name: "lcredepositrequest",
  data: function () {
    return {
      clientHeight:
        Math.max(
          document.documentElement.scrollHeight,
          document.body.scrollHeight
        ) -
        132 -
        5 +
        10 -
        28,
      labelWidth: "100px",
      labelWidth2: "130px",
      loading: false,
      dialogTitle: "",
      pageNo: 1,
      
      pageSize: 20,
      amount: "",
      showtag: false,
      feeForm: {},
      feeForm2: {},
      total: 0,
      multipleSelection: [],
      lcredepositrequests: [],
      form: {},
      queryParams: {
        orderId:null,
        lockMac:null,
        phone:null,
        openid:null
      },
      addDialog: false,
      parkfieldList: [],
      parkfieldId: "",
      status: "",
      isActive:{}
    };
  },
  methods: {
    editBtn(index, row) {
      let _this = this;
      _this.$nextTick(()=>{
        if(_this.$refs.form != undefined){
          _this.$refs.checkTable.resetFields();
        }
      })

      _this.dialogTitle = "对比";
      _this.form = row;
      _this.addDialog = true;
      _this.loading = true;
      _this.feeForm={};
      _this.isActive={};
      _this.feeForm2={};
      loadProcessOrderApi({orderId:row.orderId}).then((resp) => {
        
        _this.feeForm.id=resp.data[0].id,
        _this.feeForm.userId=resp.data[0].userId,
        _this.feeForm.currentNum=resp.data[0].currentNum,
        _this.feeForm.startTime=resp.data[0].startTime
        _this.feeForm.endTime=resp.data[0].endTime
        _this.feeForm.status=resp.data[0].status
        _this.feeForm.lockIp=resp.data[0].lockIp
        _this.feeForm.lockMac=resp.data[0].lockMac
        _this.feeForm.isOccupied=resp.data[0].isOccupied
        _this.feeForm.leaveTime=resp.data[0].leaveTime
        _this.feeForm.consumeFee=resp.data[0].consumeFee
        _this.feeForm.occupiedFee=resp.data[0].occupiedFee
        _this.feeForm.occupiedTime=resp.data[0].occupiedTime
        _this.feeForm.orderId=resp.data[0].orderId
        _this.feeForm.electricityNum=resp.data[0].electricityNum
        _this.feeForm.firstElectricityNum=resp.data[0].firstElectricityNum
        _this.feeForm.secondElectricityNum=resp.data[0].secondElectricityNum
        _this.feeForm.thirdElectricityNum=resp.data[0].thirdElectricityNum
        _this.feeForm.fourthElectricityNum=resp.data[0].fourthElectricityNum
        _this.feeForm.payWays=resp.data[0].payWays
        _this.feeForm.stopReason=resp.data[0].stopReason
        _this.feeForm.exceptionCode=resp.data[0].exceptionCode
        _this.feeForm.payOccTime=resp.data[0].payOccTime
        _this.feeForm.notes=resp.data[0].notes
        _this.feeForm.amount=resp.data[0].amount
        _this.feeForm.opName=resp.data[0].opName
        

        _this.feeForm2.id=resp.data[1].id
        _this.feeForm2.userId=resp.data[1].userId
        _this.feeForm2.currentNum=resp.data[1].currentNum
        _this.feeForm2.startTime=resp.data[1].startTime
        _this.feeForm2.endTime=resp.data[1].endTime
        _this.feeForm2.status=resp.data[1].status
        _this.feeForm2.lockIp=resp.data[1].lockIp
        _this.feeForm2.lockMac=resp.data[1].lockMac
        _this.feeForm2.isOccupied=resp.data[1].isOccupied
        _this.feeForm2.leaveTime=resp.data[1].leaveTime
        _this.feeForm2.consumeFee=resp.data[1].consumeFee
        _this.feeForm2.occupiedFee=resp.data[1].occupiedFee
        _this.feeForm2.occupiedTime=resp.data[1].occupiedTime
        _this.feeForm2.orderId=resp.data[1].orderId
        _this.feeForm2.electricityNum=resp.data[1].electricityNum
        _this.feeForm2.firstElectricityNum=resp.data[1].firstElectricityNum
        _this.feeForm2.secondElectricityNum=resp.data[1].secondElectricityNum
        _this.feeForm2.thirdElectricityNum=resp.data[1].thirdElectricityNum
        _this.feeForm2.fourthElectricityNum=resp.data[1].fourthElectricityNum
        _this.feeForm2.payWays=resp.data[1].payWays
        _this.feeForm2.stopReason=resp.data[1].stopReason
        _this.feeForm2.exceptionCode=resp.data[1].exceptionCode
        _this.feeForm2.payOccTime=resp.data[1].payOccTime
        _this.feeForm2.amount=resp.data[1].amount
       

        
       

        if( resp.data[0].id == resp.data[1].id){_this.isActive.id = false}else{_this.isActive.id = true}
        if( resp.data[0].userId == resp.data[1].userId){_this.isActive.userId = false}else{_this.isActive.userId = true}
        if( resp.data[0].currentNum == resp.data[1].currentNum){_this.isActive.currentNum = false}else{_this.isActive.currentNum = true}
        if( resp.data[0].startTime == resp.data[1].startTime){_this.isActive.startTime = false}else{_this.isActive.startTime = true}
        if( resp.data[0].endTime == resp.data[1].endTime){_this.isActive.endTime = false}else{_this.isActive.endTime = true}
        if( resp.data[0].status == resp.data[1].status){_this.isActive.status = false}else{_this.isActive.status = true}
        if( resp.data[0].lockIp == resp.data[1].lockIp){_this.isActive.lockIp = false}else{_this.isActive.lockIp = true}
        if( resp.data[0].lockMac == resp.data[1].lockMac){_this.isActive.lockMac = false}else{_this.isActive.lockMac = true}
        if( resp.data[0].isOccupied == resp.data[1].isOccupied){_this.isActive.isOccupied = false}else{_this.isActive.isOccupied = true}
        if( resp.data[0].leaveTime == resp.data[1].leaveTime){_this.isActive.leaveTime = false}else{_this.isActive.leaveTime = true}
        if( resp.data[0].consumeFee == resp.data[1].consumeFee){_this.isActive.consumeFee = false}else{_this.isActive.consumeFee = true}
        if( resp.data[0].occupiedTime == resp.data[1].occupiedTime){_this.isActive.occupiedTime = false}else{_this.isActive.occupiedTime = true}
        if( resp.data[0].orderId == resp.data[1].orderId){_this.isActive.orderId = false}else{_this.isActive.orderId = true}
        if( resp.data[0].electricityNum == resp.data[1].electricityNum){_this.isActive.electricityNum = false}else{_this.isActive.electricityNum = true}
        if( resp.data[0].firstElectricityNum == resp.data[1].firstElectricityNum){_this.isActive.firstElectricityNum = false}else{_this.isActive.firstElectricityNum = true}
        if( resp.data[0].secondElectricityNum == resp.data[1].secondElectricityNum){_this.isActive.secondElectricityNum = false}else{_this.isActive.secondElectricityNum = true}
        if( resp.data[0].thirdElectricityNum == resp.data[1].thirdElectricityNum){_this.isActive.thirdElectricityNum = false}else{_this.isActive.thirdElectricityNum = true}
        if( resp.data[0].fourthElectricityNum == resp.data[1].fourthElectricityNum){_this.isActive.fourthElectricityNum = false}else{_this.isActive.fourthElectricityNum = true}
        if( resp.data[0].payWays == resp.data[1].payWays){_this.isActive.payWays = false}else{_this.isActive.payWays = true}
        if( resp.data[0].stopReason == resp.data[1].stopReason){_this.isActive.stopReason = false}else{_this.isActive.stopReason = true}
        if( resp.data[0].exceptionCode == resp.data[1].exceptionCode){_this.isActive.exceptionCode = false}else{_this.isActive.exceptionCode = true}
        if( resp.data[0].payOccTime == resp.data[1].payOccTime){_this.isActive.payOccTime = false}else{_this.isActive.payOccTime = true}
        if( resp.data[0].occupiedFee == resp.data[1].occupiedFee){_this.isActive.occupiedFee = false}else{_this.isActive.occupiedFee = true}
        if( resp.data[0].amount == resp.data[1].amount){_this.isActive.amount = false}else{_this.isActive.amount = true}
      
       
    
      });
      setTimeout(() => {
            _this.loading = false;
          }, 1 * 1000);
        
    },
    check() {
      var _this = this;
      _this.showtag = true;
    },
    procRefund(index, row, status) {
      let _this = this;
      _this.loading = true;
      procRefundApi(row.id, status).then((resp) => {
        console.log(resp);
        _this.loadAbnormalOrder(this.pageNo, this.pageSize);
        _this.$notify({
          title: "成功",
          message: "已处理",
          type: "success",
        });
      });
    },
    handlePageChange(pageSize) {
      this.pageSize = pageSize;
      this.loadAbnormalOrder(this.pageNo, this.pageSize);
    },
    search(){
      let _this = this;
      // if(_this.queryParams.orderId == ''){_this.queryParams.orderId = null}
      // if(_this.queryParams.mac == ''){_this.queryParams.mac = null}
      // if(_this.queryParams.phone == ''){_this.queryParams.phone = null}
      // if(_this.queryParams.openid == ''){_this.queryParams.openid = null}

      _this.loadAbnormalOrder(this.pageNo, this.pageSize)

    },
    reload(){
      let _this = this;
      _this.loadAbnormalOrder(this.pageNo, this.pageSize)
    },
    handleNoChange(pageNo) {
      this.pageNo = pageNo;
      this.loadAbnormalOrder(this.pageNo, this.pageSize);
    },
    handleTableChange(val) {
      this.multipleSelection = val;
    },
    loadAbnormalOrder(pageNo, pageSize) {
      let _this = this;
     
_this.loading = true;

      loadlistApi({ 
         pageNo: pageNo, 
         pageSize: pageSize,
         orderId:_this.queryParams.orderId,
         mac:_this.queryParams.lockMac,
         phone:_this.queryParams.phone == null ? null : _this.queryParams.phone.replace(/\s*/g, ""),
         openid:_this.queryParams.openid,
         roleCode:_this.roleCode
        
        }).then(
        (resp) => {
          if (resp.errmsg === "ok") {
            // console.log("444555552222",resp.data.dataList);
            _this.total = resp.data.totalNum;
            _this.list = resp.data.dataList;
          }
          setTimeout(() => {
            _this.loading = false;
          }, 2 * 1000);
        }
      );
    },
    // loadParkfieldApi() {
    //   let _this = this;
    //   _this.loading = true;
    //   loadParkfieldApi().then((resp) => {
    //     _this.parkfieldList = resp.data.dataList;
    //     console.log(_this.parkfieldList);
    //     _this.loading = false;
    //   });
    // },
    // queryBtn() {
    //   let _this = this;
    //   _this.loading = true;
    //   console.log(_this.form);
    //   loadAbnormalOrderApi(_this.form).then((resp) => {
    //     _this.lcredepositrequests = resp.data;
    //     console.log(_this.lcredepositrequests);
    //     _this.loading = false;
    //   });
    // },

  },
  computed: {
    userState() {
      return getNickName() === getTestUserName();
    },
  },
  mounted: function () {
    let _this = this;
    _this.roleCode = getRoleCode()
    this.$nextTick(function () {
      this.loadAbnormalOrder(_this.pageNo, _this.pageSize);
    });
  },
};
</script>

<style scoped>


.page-tool div {
  text-align: right;
}

.lock-btn {
  margin-bottom: 5px;
  margin-top: -10px;
}
.operateBtn {
  font-size: 18px;
  width: 32px;
  height: 32px;
  padding: 0;
}
.list{
  box-shadow: rgb(213 213 213) 3px 3px 10px;
    border: 1px solid rgb(213, 213, 213);
    height: 36px;
    padding: 8px;
    border-radius: 100px;
}
.active{
  border:2px solid rgb(250, 59, 59);
  box-shadow: 3px 3px 3px#fcabab;
}
</style>